<script setup>
	import {
		Position,
		Handle,
		useNode
	} from '@vue-flow/core'
	import AiChatSetting from './cnps/AiChatSetting.vue';
	import {
		ref,
		watch,
		provide,
        inject
	} from "vue";

	const props = defineProps(['id', 'data'])
	provide('currentNodeId', props.id);
    const updateNodesData = inject("updateNodesData")
    // 监听props.data的变化
    watch(() => props.data, (newValue, oldValue) => {
        console.log('props.data changed ', newValue);
        updateNodesData();
    }, {
        deep: true
    })
</script>

<template>
	<div class="_container">
		<div class="fx fx-c_center pad-16 header">
			<div class="fx fx-center wh-40 logo">
				<jb-icon :local="true" icon="akar-icons:arrow-repeat" width="30" color="#22c55e"></jb-icon>
			</div>
			<div class="ml-10 tc-dark">
				<div>重写提问</div>
				<p class="font-12 tc-assist">根据上下文重新完善提问</p>
			</div>
		</div>
		<div class="form fx-col pad-16 " @mousedown.stop>

			<label>上下文条数</label>
			<n-input-number round style="width: 100%" :precision="0" min="0"
				v-model:value="props.data.rewriteConfig.limit" placeholder="请输入查询条数" max="20">
			</n-input-number>

			<AiChatSetting v-model="props.data.llmConfig" :out="['modelType','promptTpl',]"
				:inner="['systemRole','maxTokens', 'temperature', 'topP', 'topK']"  />


		</div>
		<div class="footer pad-16">
			<p class="tc-gray ">输出字段</p>
			<div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
				<div class="fx fx-c_center">
					<div class="output-flag noshrink"></div>
					<n-input v-model:value="props.data.rewriteConfig.outputField" placeholder="字段名"
						class="tc-gray ml-8 w-120"></n-input>
				</div>
				<span class="tc-assist">AI生成的回答</span>
			</div>
		</div>

		<Handle type="target" :position="Position.Left" />
		<Handle type="source" id="success" :position="Position.Right"
			style="transform: translate(50%, calc(-50% - 30px))" />
		<Handle type="source" id="fail" :position="Position.Right"
			style="transform: translate(50%, calc(-50% + 30px))" />


	</div>
</template>

<style scoped>
	._container {
		background-color: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		box-sizing: border-box;
		width: 340px;
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
	}

	.header,
	.form {
		border-bottom: 1px solid rgb(229, 231, 235);
	}

	.logo {
		background: #dcfce7;
		border-radius: 12px;
	}

	label {
		margin-bottom: 8px;
	}

	label:not(:first-child) {
		margin-top: 16px;
	}

	.output {
		background: rgb(249, 250, 251);
		border-radius: 12px;
	}

	.output-flag {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #22c55e;
	}
</style>